<template component>
  <style>
    :host {
      display: block;
      width: 100%;
      height: 100%;
    }

    #webglCanvas {
      width: 100%;
      height: 100%;
    }
  </style>
  <canvas id="webglCanvas"></canvas>
  <script>
    export default async () => {
      return {
        tag: "bg-one",
        proto: {
          init() {
            this._canvas = new Web3Background(
              this.shadow.$("#webglCanvas").ele
            );
          },
          // 暴露切换白天模式的方法
          toggleDayMode() {
            if (this._canvas) {
              this._canvas.toggleDayMode();
            }
          },
          // 暴露设置白天模式的方法
          setDayMode(isDayMode) {
            if (this._canvas) {
              this._canvas.setDayMode(isDayMode);
            }
          },
          // 获取当前模式状态
          isDayMode() {
            return this._canvas ? this._canvas.isDayMode : false;
          }
        },
        attached() {
          this.init();

        },
        detached() {
          this._canvas._isend = true;
        },
      };
    };

    class Web3Background {
      constructor(canvas) {
        this.canvas = canvas;
        this.gl =
          this.canvas.getContext("webgl") ||
          this.canvas.getContext("experimental-webgl");

        if (!this.gl) {
          console.error("WebGL not supported");
          return;
        }

        this.time = 0;
        this.nodes = [];
        this.connections = [];
        this.particles = [];
        this.mouseX = 0;
        this.mouseY = 0;
        
        // 检测设备类型和屏幕尺寸
        this.isMobile = this.detectMobile();
        this.config = this.getOptimizedConfig();
        
        // 添加白天模式属性，默认为夜间模式
        this.isDayMode = false;

        this.init();
        this.setupEventListeners();
        this.animate();
      }
      
      detectMobile() {
        const userAgent = navigator.userAgent.toLowerCase();
        const isTouchDevice = 'ontouchstart' in window;
        const screenWidth = window.innerWidth;
        
        return isTouchDevice || 
               userAgent.includes('mobile') || 
               userAgent.includes('android') || 
               userAgent.includes('iphone') || 
               userAgent.includes('ipad') ||
               screenWidth <= 768;
      }
      
      getOptimizedConfig() {
        if (this.isMobile) {
          return {
            nodeCount: 20,      // 移动端减少节点数量
            particleCount: 80,    // 移动端减少粒子数量
            connectionDistance: 100, // 移动端减少连接距离
            maxConnections: 30   // 移动端限制最大连接数
          };
        } else {
          return {
            nodeCount: 50,      // 桌面版保持原有数量
            particleCount: 200,
            connectionDistance: 150,
            maxConnections: Infinity
          };
        }
      }

      init() {
        this.resizeCanvas();
        this.setupShaders();
        this.createNodes();
        this.createParticles();
      }

      resizeCanvas() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
      }

      setupShaders() {
        // Node shader
        const nodeVertexShader = `
                    precision mediump float;
                    attribute vec2 a_position;
                    attribute vec3 a_color;
                    attribute float a_size;
                    
                    uniform vec2 u_resolution;
                    uniform float u_time;
                    uniform vec2 u_mouse;
                    uniform bool u_isDayMode; // 新增：白天模式标志
                    
                    varying vec3 v_color;
                    varying float v_alpha;
                    
                    void main() {
                        vec2 position = a_position;
                        
                        // Pulsing effect
                        float pulse = sin(u_time * 2.0 + position.x * 0.01 + position.y * 0.01) * 0.5 + 0.5;
                        float size = a_size * (1.0 + pulse * 0.3);
                        
                        // Mouse interaction
                        vec2 mouseVec = u_mouse - position;
                        float mouseDist = length(mouseVec);
                        if (mouseDist < 150.0) {
                            position += normalize(mouseVec) * (150.0 - mouseDist) * 0.1;
                        }
                        
                        vec2 clipSpace = ((position / u_resolution) * 2.0) - 1.0;
                        clipSpace.y *= -1.0;
                        
                        gl_Position = vec4(clipSpace, 0.0, 1.0);
                        gl_PointSize = size;
                        
                        v_color = a_color;
                        // 根据模式调整透明度
                        if (u_isDayMode) {
                            v_alpha = 0.9 + pulse * 0.1; // 白天模式更高的不透明度
                        } else {
                            v_alpha = 0.8 + pulse * 0.2;
                        }
                    }
                `;

        const nodeFragmentShader = `
                    precision mediump float;
                    varying vec3 v_color;
                    varying float v_alpha;
                    uniform bool u_isDayMode; // 新增：白天模式标志
                    
                    void main() {
                        vec2 coord = gl_PointCoord - vec2(0.5);
                        float distance = length(coord);
                        
                        if (distance > 0.5) discard;
                        
                        // Create a glowing effect
                        float alpha = 1.0 - (distance * 2.0);
                        alpha = pow(alpha, 2.0) * v_alpha;
                        
                        // 根据模式调整最终颜色
                        vec3 finalColor = v_color;
                        if (u_isDayMode) {
                            // 白天模式稍微提高亮度
                            finalColor = min(vec3(1.0), finalColor * 1.2);
                            alpha = alpha * 0.9; // 稍微降低透明度
                        }
                        
                        gl_FragColor = vec4(finalColor, alpha);
                    }
                `;

        // Connection shader
        const connectionVertexShader = `
                    precision mediump float;
                    attribute vec2 a_position;
                    attribute vec3 a_color;
                    
                    uniform vec2 u_resolution;
                    uniform float u_time;
                    uniform bool u_isDayMode; // 新增：白天模式标志
                    
                    varying vec3 v_color;
                    
                    void main() {
                        vec2 position = a_position;
                        vec2 clipSpace = ((position / u_resolution) * 2.0) - 1.0;
                        clipSpace.y *= -1.0;
                        
                        gl_Position = vec4(clipSpace, 0.0, 1.0);
                        v_color = a_color;
                    }
                `;

        const connectionFragmentShader = `
                    precision mediump float;
                    varying vec3 v_color;
                    uniform float u_time;
                    uniform bool u_isDayMode; // 新增：白天模式标志
                    
                    void main() {
                        // 根据模式调整透明度
                        float alpha = 0.3;
                        if (u_isDayMode) {
                            alpha = 0.2; // 白天模式稍微降低透明度
                        }
                        gl_FragColor = vec4(v_color, alpha);
                    }
                `;

        // Particle shader
        const particleVertexShader = `
                    precision mediump float;
                    attribute vec2 a_position;
                    attribute vec3 a_color;
                    attribute float a_size;
                    
                    uniform vec2 u_resolution;
                    uniform float u_time;
                    uniform bool u_isDayMode; // 新增：白天模式标志
                    
                    varying vec3 v_color;
                    
                    void main() {
                        vec2 position = a_position;
                        
                        // Move particles upward
                        position.y -= mod(u_time * 20.0 + a_position.x * 0.1, 200.0);
                        
                        vec2 clipSpace = ((position / u_resolution) * 2.0) - 1.0;
                        clipSpace.y *= -1.0;
                        
                        gl_Position = vec4(clipSpace, 0.0, 1.0);
                        gl_PointSize = a_size;
                        
                        v_color = a_color;
                    }
                `;

        const particleFragmentShader = `
                    precision mediump float;
                    varying vec3 v_color;
                    uniform bool u_isDayMode; // 新增：白天模式标志
                    
                    void main() {
                        vec2 coord = gl_PointCoord - vec2(0.5);
                        float distance = length(coord);
                        
                        if (distance > 0.5) discard;
                        
                        // Create a soft glow
                        float alpha = 1.0 - (distance * 2.0);
                        alpha = pow(alpha, 2.0) * 0.7;
                        
                        // 根据模式调整透明度
                        if (u_isDayMode) {
                            alpha = alpha * 0.8; // 白天模式稍微降低透明度
                        }
                        
                        gl_FragColor = vec4(v_color, alpha);
                    }
                `;

        this.nodeProgram = this.createProgram(
          nodeVertexShader,
          nodeFragmentShader
        );
        this.connectionProgram = this.createProgram(
          connectionVertexShader,
          connectionFragmentShader
        );
        this.particleProgram = this.createProgram(
          particleVertexShader,
          particleFragmentShader
        );
      }

      createShader(type, source) {
        const shader = this.gl.createShader(type);
        this.gl.shaderSource(shader, source);
        this.gl.compileShader(shader);

        if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
          console.error(
            "Shader compilation error:",
            this.gl.getShaderInfoLog(shader)
          );
          this.gl.deleteShader(shader);
          return null;
        }

        return shader;
      }

      createProgram(vertexSource, fragmentSource) {
        const vertexShader = this.createShader(
          this.gl.VERTEX_SHADER,
          vertexSource
        );
        const fragmentShader = this.createShader(
          this.gl.FRAGMENT_SHADER,
          fragmentSource
        );

        const program = this.gl.createProgram();
        this.gl.attachShader(program, vertexShader);
        this.gl.attachShader(program, fragmentShader);
        this.gl.linkProgram(program);

        if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
          console.error(
            "Program linking error:",
            this.gl.getProgramInfoLog(program)
          );
          return null;
        }

        return program;
      }

      createNodes() {
        const nodeCount = this.config.nodeCount; // 使用配置中的节点数量
        this.nodes = [];

        for (let i = 0; i < nodeCount; i++) {
          let color;
          if (this.isDayMode) {
            // 白天模式使用更明亮的颜色
            color = [
              Math.random() * 0.3 + 0.7, // R (0.7-1.0)
              Math.random() * 0.3 + 0.5, // G (0.5-0.8)
              Math.random() * 0.5 + 0.3, // B (0.3-0.8)
            ];
          } else {
            // 夜间模式使用深色
            color = [
              Math.random() * 0.5 + 0.5, // R
              Math.random() * 0.5, // G
              Math.random() * 0.8 + 0.2, // B
            ];
          }
          
          this.nodes.push({
            x: Math.random() * this.canvas.width,
            y: Math.random() * this.canvas.height,
            size: Math.random() * 8 + 4,
            color: color,
            // 添加移动速度属性
            vx: (Math.random() - 0.5) * 0.5,
            vy: (Math.random() - 0.5) * 0.5,
          });
        }

        // Create connections between nearby nodes
        this.connections = [];
        for (let i = 0; i < this.nodes.length; i++) {
          for (let j = i + 1; j < this.nodes.length; j++) {
            const nodeA = this.nodes[i];
            const nodeB = this.nodes[j];
            const dx = nodeA.x - nodeB.x;
            const dy = nodeA.y - nodeB.y;
            const distance = Math.sqrt(dx * dx + dy * dy);

            if (distance < this.config.connectionDistance) { // 使用配置中的连接距离
              this.connections.push({
                x1: nodeA.x,
                y1: nodeA.y,
                x2: nodeB.x,
                y2: nodeB.y,
                color: [
                  (nodeA.color[0] + nodeB.color[0]) / 2,
                  (nodeA.color[1] + nodeB.color[1]) / 2,
                  (nodeA.color[2] + nodeB.color[2]) / 2,
                ],
              });
              
              // 移动端限制连接数量
              if (this.config.maxConnections !== Infinity && this.connections.length >= this.config.maxConnections) {
                break;
              }
            }
          }
          if (this.config.maxConnections !== Infinity && this.connections.length >= this.config.maxConnections) {
            break;
          }
        }
      }

      createParticles() {
        const particleCount = this.config.particleCount; // 使用配置中的粒子数量
        this.particles = [];

        for (let i = 0; i < particleCount; i++) {
          let color;
          if (this.isDayMode) {
            // 白天模式使用更明亮的颜色
            color = [
              Math.random() * 0.2 + 0.6, // R (0.6-0.8)
              Math.random() * 0.3 + 0.5, // G (0.5-0.8)
              Math.random() * 0.2 + 0.6, // B (0.6-0.8)
            ];
          } else {
            // 夜间模式使用深色
            color = [
              Math.random() * 0.3 + 0.7, // R
              Math.random() * 0.3 + 0.7, // G
              Math.random() * 0.5 + 0.5, // B
            ];
          }
          
          this.particles.push({
            x: Math.random() * this.canvas.width,
            y: Math.random() * this.canvas.height + this.canvas.height,
            size: Math.random() * 3 + 1,
            color: color,
            // 添加横向速度
            vx: (Math.random() - 0.5) * 0.3,
          });
        }
      }

      setupEventListeners() {
        window.addEventListener("resize", () => {
          this.resizeCanvas();
          // 重新检测设备类型和配置
          const newIsMobile = this.detectMobile();
          if (newIsMobile !== this.isMobile) {
            this.isMobile = newIsMobile;
            this.config = this.getOptimizedConfig();
          }
          this.createNodes(); // Recreate nodes on resize
          this.createParticles(); // 重新创建粒子
        });

        document.addEventListener("mousemove", (e) => {
          this.mouseX = e.clientX;
          this.mouseY = e.clientY;
        });
      }

      renderNodes() {
        if (!this.nodeProgram) return;

        this.gl.useProgram(this.nodeProgram);

        // 更新节点位置
        for (const node of this.nodes) {
          // 更新位置
          node.x += node.vx;
          node.y += node.vy;

          // 边缘反弹
          if (node.x < 0 || node.x > this.canvas.width) {
            node.vx *= -1;
            node.x = node.x < 0 ? 0 : this.canvas.width;
          }
          if (node.y < 0 || node.y > this.canvas.height) {
            node.vy *= -1;
            node.y = node.y < 0 ? 0 : this.canvas.height;
          }
        }

        // Prepare node data
        const positions = [];
        const colors = [];
        const sizes = [];

        for (const node of this.nodes) {
          positions.push(node.x, node.y);
          colors.push(...node.color);
          sizes.push(node.size);
        }

        // Create buffers
        const positionBuffer = this.gl.createBuffer();
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
        this.gl.bufferData(
          this.gl.ARRAY_BUFFER,
          new Float32Array(positions),
          this.gl.STATIC_DRAW
        );

        const colorBuffer = this.gl.createBuffer();
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, colorBuffer);
        this.gl.bufferData(
          this.gl.ARRAY_BUFFER,
          new Float32Array(colors),
          this.gl.STATIC_DRAW
        );

        const sizeBuffer = this.gl.createBuffer();
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, sizeBuffer);
        this.gl.bufferData(
          this.gl.ARRAY_BUFFER,
          new Float32Array(sizes),
          this.gl.STATIC_DRAW
        );

        // Set up attributes
        const positionLocation = this.gl.getAttribLocation(
          this.nodeProgram,
          "a_position"
        );
        this.gl.enableVertexAttribArray(positionLocation);
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
        this.gl.vertexAttribPointer(
          positionLocation,
          2,
          this.gl.FLOAT,
          false,
          0,
          0
        );

        const colorLocation = this.gl.getAttribLocation(
          this.nodeProgram,
          "a_color"
        );
        this.gl.enableVertexAttribArray(colorLocation);
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, colorBuffer);
        this.gl.vertexAttribPointer(
          colorLocation,
          3,
          this.gl.FLOAT,
          false,
          0,
          0
        );

        const sizeLocation = this.gl.getAttribLocation(
          this.nodeProgram,
          "a_size"
        );
        this.gl.enableVertexAttribArray(sizeLocation);
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, sizeBuffer);
        this.gl.vertexAttribPointer(
          sizeLocation,
          1,
          this.gl.FLOAT,
          false,
          0,
          0
        );

        // Set up uniforms
        const resolutionLocation = this.gl.getUniformLocation(
          this.nodeProgram,
          "u_resolution"
        );
        this.gl.uniform2f(
          resolutionLocation,
          this.canvas.width,
          this.canvas.height
        );

        const timeLocation = this.gl.getUniformLocation(
          this.nodeProgram,
          "u_time"
        );
        this.gl.uniform1f(timeLocation, this.time);

        const mouseLocation = this.gl.getUniformLocation(
          this.nodeProgram,
          "u_mouse"
        );
        this.gl.uniform2f(mouseLocation, this.mouseX || 0, this.mouseY || 0);
        
        // 传递白天模式标志
        const isDayModeLocation = this.gl.getUniformLocation(
          this.nodeProgram,
          "u_isDayMode"
        );
        this.gl.uniform1i(isDayModeLocation, this.isDayMode);

        // Draw
        this.gl.drawArrays(this.gl.POINTS, 0, this.nodes.length);
      }

      renderConnections() {
        if (!this.connectionProgram) return;

        this.gl.useProgram(this.connectionProgram);

        // 重新计算连接线
        this.connections = [];
        for (let i = 0; i < this.nodes.length; i++) {
          for (let j = i + 1; j < this.nodes.length; j++) {
            const nodeA = this.nodes[i];
            const nodeB = this.nodes[j];
            const dx = nodeA.x - nodeB.x;
            const dy = nodeA.y - nodeB.y;
            const distance = Math.sqrt(dx * dx + dy * dy);

            if (distance < 150) {
              this.connections.push({
                x1: nodeA.x,
                y1: nodeA.y,
                x2: nodeB.x,
                y2: nodeB.y,
                color: [
                  (nodeA.color[0] + nodeB.color[0]) / 2,
                  (nodeA.color[1] + nodeB.color[1]) / 2,
                  (nodeA.color[2] + nodeB.color[2]) / 2,
                ],
              });
            }
          }
        }

        // Prepare connection data
        const positions = [];
        const colors = [];

        for (const connection of this.connections) {
          positions.push(
            connection.x1,
            connection.y1,
            connection.x2,
            connection.y2
          );
          colors.push(...connection.color, ...connection.color);
        }

        // Create buffers
        const positionBuffer = this.gl.createBuffer();
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
        this.gl.bufferData(
          this.gl.ARRAY_BUFFER,
          new Float32Array(positions),
          this.gl.STATIC_DRAW
        );

        const colorBuffer = this.gl.createBuffer();
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, colorBuffer);
        this.gl.bufferData(
          this.gl.ARRAY_BUFFER,
          new Float32Array(colors),
          this.gl.STATIC_DRAW
        );

        // Set up attributes
        const positionLocation = this.gl.getAttribLocation(
          this.connectionProgram,
          "a_position"
        );
        this.gl.enableVertexAttribArray(positionLocation);
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
        this.gl.vertexAttribPointer(
          positionLocation,
          2,
          this.gl.FLOAT,
          false,
          0,
          0
        );

        const colorLocation = this.gl.getAttribLocation(
          this.connectionProgram,
          "a_color"
        );
        this.gl.enableVertexAttribArray(colorLocation);
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, colorBuffer);
        this.gl.vertexAttribPointer(
          colorLocation,
          3,
          this.gl.FLOAT,
          false,
          0,
          0
        );

        // Set up uniforms
        const resolutionLocation = this.gl.getUniformLocation(
          this.connectionProgram,
          "u_resolution"
        );
        this.gl.uniform2f(
          resolutionLocation,
          this.canvas.width,
          this.canvas.height
        );

        const timeLocation = this.gl.getUniformLocation(
          this.connectionProgram,
          "u_time"
        );
        this.gl.uniform1f(timeLocation, this.time);
        
        // 传递白天模式标志
        const isDayModeLocation = this.gl.getUniformLocation(
          this.connectionProgram,
          "u_isDayMode"
        );
        this.gl.uniform1i(isDayModeLocation, this.isDayMode);

        // Draw
        this.gl.drawArrays(this.gl.LINES, 0, this.connections.length * 2);
      }

      renderParticles() {
        if (!this.particleProgram) return;

        this.gl.useProgram(this.particleProgram);

        // 更新粒子位置
        for (const particle of this.particles) {
          // 更新位置
          particle.x += particle.vx;
          particle.y -= 2; // 向上移动

          // 如果粒子超出屏幕顶部，重置到底部
          if (particle.y < 0) {
            particle.x = Math.random() * this.canvas.width;
            particle.y = this.canvas.height + Math.random() * 100;
          }
        }

        // Prepare particle data
        const positions = [];
        const colors = [];
        const sizes = [];

        for (const particle of this.particles) {
          positions.push(particle.x, particle.y);
          colors.push(...particle.color);
          sizes.push(particle.size);
        }

        // Create buffers
        const positionBuffer = this.gl.createBuffer();
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
        this.gl.bufferData(
          this.gl.ARRAY_BUFFER,
          new Float32Array(positions),
          this.gl.STATIC_DRAW
        );

        const colorBuffer = this.gl.createBuffer();
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, colorBuffer);
        this.gl.bufferData(
          this.gl.ARRAY_BUFFER,
          new Float32Array(colors),
          this.gl.STATIC_DRAW
        );

        const sizeBuffer = this.gl.createBuffer();
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, sizeBuffer);
        this.gl.bufferData(
          this.gl.ARRAY_BUFFER,
          new Float32Array(sizes),
          this.gl.STATIC_DRAW
        );

        // Set up attributes
        const positionLocation = this.gl.getAttribLocation(
          this.particleProgram,
          "a_position"
        );
        this.gl.enableVertexAttribArray(positionLocation);
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);
        this.gl.vertexAttribPointer(
          positionLocation,
          2,
          this.gl.FLOAT,
          false,
          0,
          0
        );

        const colorLocation = this.gl.getAttribLocation(
          this.particleProgram,
          "a_color"
        );
        this.gl.enableVertexAttribArray(colorLocation);
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, colorBuffer);
        this.gl.vertexAttribPointer(
          colorLocation,
          3,
          this.gl.FLOAT,
          false,
          0,
          0
        );

        const sizeLocation = this.gl.getAttribLocation(
          this.particleProgram,
          "a_size"
        );
        this.gl.enableVertexAttribArray(sizeLocation);
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, sizeBuffer);
        this.gl.vertexAttribPointer(
          sizeLocation,
          1,
          this.gl.FLOAT,
          false,
          0,
          0
        );

        // Set up uniforms
        const resolutionLocation = this.gl.getUniformLocation(
          this.particleProgram,
          "u_resolution"
        );
        this.gl.uniform2f(
          resolutionLocation,
          this.canvas.width,
          this.canvas.height
        );

        const timeLocation = this.gl.getUniformLocation(
          this.particleProgram,
          "u_time"
        );
        this.gl.uniform1f(timeLocation, this.time);
        
        // 传递白天模式标志
        const isDayModeLocation = this.gl.getUniformLocation(
          this.particleProgram,
          "u_isDayMode"
        );
        this.gl.uniform1i(isDayModeLocation, this.isDayMode);
 
        // Draw
        this.gl.drawArrays(this.gl.POINTS, 0, this.particles.length);
      }

      render() {
        // Clear canvas based on mode
        if (this.isDayMode) {
          this.gl.clearColor(0.85, 0.9, 0.95, 1.0); // 浅蓝白色背景
        } else {
          this.gl.clearColor(0.047, 0.047, 0.078, 1.0); // #0c0c14 深蓝黑色背景
        }
        this.gl.clear(this.gl.COLOR_BUFFER_BIT);

        // Enable blending
        this.gl.enable(this.gl.BLEND);
        this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);

        // Render components
        this.renderConnections();
        this.renderNodes();
        this.renderParticles();
      }

      animate() {
        if (this._isend) {
          return;
        }
        this.time += 0.016;
        this.render();
        requestAnimationFrame(() => this.animate());
      }
      
      // 切换白天/夜间模式
      toggleDayMode() {
        this.isDayMode = !this.isDayMode;
        // 重新创建节点和粒子以使用新模式的颜色
        this.createNodes();
        this.createParticles();
      }
      
      // 设置白天模式
      setDayMode(isDayMode) {
        if (this.isDayMode !== isDayMode) {
          this.isDayMode = isDayMode;
          // 重新创建节点和粒子以使用新模式的颜色
          this.createNodes();
          this.createParticles();
        }
      }
    }
  </script>
</template>
